<template>
	<view>
		<view class="test-box" style="background-image: url(https://hyjd-ycyjydt.com/emergency-study-web/test.png);">
			<view class="test-title">
				延长油田安全生产知识题库
			</view>
			<view class="know-box">
				<view class="know-title" style="font-size: 60rpx;">
					{{resObj.score}}%
				</view>
				<view class="know-title" style="color: #000000; opacity: 0.45; height: 40rpx; line-height: 40rpx;">
					本次正确率
				</view>
				<u-row gutter="16" justify="space-between">
					<u-col span="4">
						<view class="demo-layout" style="border-right: solid 4rpx #f0f0f0; font-size: 40rpx; color: #000;">{{resObj.spendMinutes}}</view>
						<view class="bg-purple" style="border-right: solid 4rpx #f0f0f0;">测试时间</view>
					</u-col>
					<u-col span="4">
						<view class="demo-layout" style="border-right: solid 4rpx #f0f0f0; font-size: 40rpx; color: #000;">{{resObj.wrongCount}}</view>
						<view class="bg-purple" style="border-right: solid 4rpx #f0f0f0;">错题数</view>
					</u-col>
					<u-col span="4">
						<view class="demo-layout" style="font-size: 40rpx; color: #000;">{{resObj.questions.length}}</view>
						<view class="bg-purple">本次答题数</view>
					</u-col>
				</u-row>
			</view>
			<view class="results-box">
				<view class="title">
					选择题
				</view>
				<view class="answer-box">
					<view class="answer" v-for="(item,index) in resObj.choose" :key="index" @click="errorItem(item)">
						<text v-if="item.userAnswer != item.answer" style="background-color: #FA0606;">{{item.serialNumber}}</text>
						<text v-else style="background-color: #62D528;">{{item.serialNumber}}</text>
					</view>
				</view>
				
			</view>
			<view class="results-box" style="margin-bottom: 20rpx;" v-if="resObj.judge.length > 0">
				<view class="title">
					判断题
				</view>
				<view class="answer-box">
					<view class="answer" v-for="(item,index) in resObj.judge" :key="index" @click="errorItem(item)">
						<text v-if="item.userAnswer != item.answer" style="background-color: #FA0606;" @click="errorItem(item)">{{item.serialNumber}}</text>
						<text v-else style="background-color: #62D528;">{{item.serialNumber}}</text>
					</view>
				</view>
			</view>
			<view class="results-box" style="margin-bottom: 20rpx;" v-if="resObj.check.length > 0">
				<view class="title">
					多选题
				</view>
				<view class="answer-box">
					<view class="answer" v-for="(item,index) in resObj.check" :key="index" @click="errorItem(item)">
						<text v-if="item.userAnswer != item.answer" style="background-color: #FA0606;" @click="errorItem(item)">{{item.serialNumber}}</text>
						<text v-else style="background-color: #62D528;">{{item.serialNumber}}</text>
					</view>
				</view>
			</view>
			<u-row gutter="16" v-if="score">
				<u-col span="6">
					<u-button :custom-style="customStyleButton1" :hair-line="false" @click="cancel" hover-class="none">不了，返回练习</u-button>
				</u-col>
				<u-col span="6">
					<u-button type="primary" :custom-style="customStyleButton" hover-class="none" @click="testRouter">我要继续练习</u-button>
				</u-col>
			</u-row>
			<u-row gutter="16" v-else>
				<u-col span="12">
					<u-button type="primary":custom-style="customStyleButton" :hair-line="false" @click="testLink" hover-class="none">返回考试页</u-button>
				</u-col>
			</u-row>
		</view>
	</view>
</template>

<script>
	import {examsScore} from '../../api/api.js'
	export default {
		data() {
			return {
				customStyleButton:{
					backgroundColor:'#F18B3A',
					borderRadius: '12rpx',
					height: '88rpx',
					borderColor: '#F18B3A',
					marginTop: '40rpx'
				},
				customStyleButton1:{
					border:"none",
					color:'#F18B3A',
					marginTop: '40rpx'
				},
				resObj:{},
				score:'',
				courseId:''
			}
		},
		onLoad(query){
			if(query.id){
				this.getExamsScore(query.id)
			}
			if(query.score){
				this.score = query.score
				this.courseId = query.courseId
			}
		},
		methods: {
			testRouter(){
				uni.navigateTo({
					url: `../choose/choose?score=${this.score}&id=${this.courseId}`
				})
			},
			// 返回考试页
			testLink(){
				uni.switchTab({
					url:'/pages/test/test'
				})
			},
			// 返回练习
			cancel(){
				uni.switchTab({
					url:'/pages/code/code'
				})
			},
			getExamsScore(id){
				examsScore({id:id}).then(resp=>{
					resp.choose = []
					resp.judge = []
					resp.check = []
					resp.questions.forEach(e=>{
						if(e.type == 0){
							resp.choose.push(e)
						}else if(e.type == 1){
							resp.judge.push(e)
						}else{
							resp.check.push(e)
						}
					})
					this.resObj = resp
				})
			},
			errorItem(item){
				uni.navigateTo({
					url: `../parsing/parsing?item=${JSON.stringify(item)}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.test-box{
	background-position: center top;
	background-repeat: no-repeat;
	background-size: 100%;
	width: 100%;
	padding: 20px;
	.test-title{
		height: 80rpx;
		line-height: 80rpx;
		color: #fff;
		font-size: 34rpx;
	}
	.know-box{
		margin-top: 20rpx;
		border-radius: 20rpx;
		padding: 40rpx 20rpx;
		background-color: #fff;
		box-shadow: 0px 2px 7px 0px rgba(241, 139, 58, 0.2);
		.know-title{
			height: 80rpx;
			line-height: 80rpx;
			font-weight: 500;
			text-align: center;
			color: #F18B3A;
			font-size: 32rpx;
			margin-bottom: 20rpx;
		}
		.demo-layout{
			color: #F18B3A;
			font-size: 64rpx;
			height: 90rpx;
			line-height: 90rpx;
			text-align: center;
		}
		.bg-purple{
			color: #000;
			opacity: 0.45;
			font-size: 28rpx;
			height: 40rpx;
			line-height: 40rpx;
			text-align: center;
		}
	}
	.results-box{
		margin-top: 20rpx;
		min-height: 100rpx;
		.title{
			height: 80rpx;
			line-height: 80rpx;
			font-size: 32rpx;
		}
		.answer-box{
			min-height: 40rpx;
			display: table;
			width: 100%;
			.answer{
				margin-top: 10rpx;
				width: 20%;
				float: left;
				text{
					width: 60rpx;
					height: 60rpx;
					border-radius: 50%;
					text-align: center;
					line-height: 60rpx;
					display: inline-block;
					color: #fff;
				}
			}
			
		}
	}
}
</style>
